<template>
    <div class="workFlowDesign-wrap"
         v-bind:style="styleObject"
         v-if="dataReady.ready">
        <div class="toolbar">
            <h3>工具栏</h3>
            <div class="item handler-choose"
                 v-bind:class="{ active:dispatch.describe.type === 'choose' }"
                 @click="chooseHandler">
                <i class="icon-choose"></i>
                <span>选择</span>
            </div>
            <div class="item handler-begin"
                 v-bind:class="{ active:dispatch.describe.type === 'begin' }"
                 @click="beginHandler">
                <i class="icon-begin"></i>
                <span>开始</span></div>
            <div class="item handler-ordinary"
                 v-bind:class="{ active:dispatch.describe.type === 'ordinary' }"
                 @click="ordinaryHandler">
                <i class="icon-ordinary"></i>
                <span>普通</span></div>
            <div class="item handler-end"
                 v-bind:class="{ active:dispatch.describe.type === 'end' }"
                 @click="endHandler">
                <i class="icon-end"></i>
                <span>结束</span></div>
            <div class="item handler-line"
                 v-bind:class="{ active:dispatch.describe.type === 'line' }"
                 @click="lineHandler">
                <i class="icon-line"></i>
                <span>连线</span></div>
        </div>
        <div id="container"
             @mousemove="mouseover"
             @click="clickContainer"
             @dblclick="dbclickContainer"
             :width="canvasWidth"
             :height="canvasHeight"></div>
        <div class="wfd-node"
             v-show="nodeHoverHandler.show"
             v-bind:style="{ left: nodeHoverHandler.position.x + 'px', top: nodeHoverHandler.position.y + 'px' }">
            <div class="tools">
                <i class="icon-editor" @click="editorNode"></i>
                <i class="icon-del" @click="deleteNode"></i>
            </div>
        </div>
        <Modal
                v-model="modal1"
                :scrollable="true"
                width="1000"
                :mask-closable="false"
                class="popupBox_wfd">
            <div slot="header">
                <span>节点属性设置</span>
            </div>
            <div class="popup-content">
                <Tabs value="name1">
                    <TabPane label="基本信息" name="name1">
                        <Form label-position="right"
                              v-model="currentNodeBasicInfor"
                              :label-width="100">
                            <Row>
                                <Col span="11">
                                    <FormItem label="名称：">
                                        <Input v-model="currentNodeBasicInfor.nodeName"
                                               placeholder="请输入节点名称"/>
                                    </FormItem>
                                </Col>
                                <Col span="2">&nbsp;</Col>
                                <Col span="11">
                                    <FormItem
                                            label="前置条件设置：">
                                        <Select
                                                v-model="currentNodeBasicInfor.precondition">
                                            <Option value="0">并发</Option>
                                            <Option value="1">鉴别</Option>
                                            <Option value="2">唯一</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="11">
                                    <FormItem
                                            label="关联表单key：">
                                        <Input
                                                v-model="currentNodeBasicInfor.formKey"
                                                placeholder="请输入关联表单key"/>
                                    </FormItem>
                                </Col>
                                <Col span="2">&nbsp;</Col>
                                <Col span="11">
                                    <FormItem
                                            label="提醒方式：">
                                        <CheckboxGroup
                                                v-model="currentNodeBasicInfor.remindType">
                                            <Checkbox label="短信提醒">
                                                <span>短信提醒</span>
                                            </Checkbox>
                                            <Checkbox label="手机推送">
                                                <span>手机推送</span>
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <FormItem
                                            label="描述：">
                                        <Input
                                                v-model="currentNodeBasicInfor.nodeDesc"
                                                :rows="4"
                                                type="textarea"
                                                placeholder="请输入描述内容"/>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </TabPane>
                    <TabPane label="参与者"
                             name="name2">
                        <Form label-position="right"
                              v-model="nodeParticipant"
                              :label-width="100">
                            <Row>
                                <Col span="24">
                                    <FormItem label="名称：">
                                        <RadioGroup
                                                @on-change="nodeParticipantChange"
                                                v-model="nodeParticipant.participantType">
                                            <Radio value="0" label="角色">角色</Radio>
                                            <Radio value="1" label="部门">部门</Radio>
                                            <Radio value="2" label="人员">人员</Radio>
                                        </RadioGroup>
                                    </FormItem>
                                </Col>
                            </Row>
                            <!--角色-->
                            <Row v-if="nodeParticipant.participantType==='角色'">
                                <Col span="12">
                                    <FormItem
                                            label="角色：">
                                        <Select :label-in-value="true"
                                                @on-change="roleOnChange"
                                                v-model="nodeParticipant.roleValue"
                                        >
                                            <Option
                                                    v-for="(item,index) in roleList"
                                                    :key="index"
                                                    :value="item.id">{{item.value}}</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                            </Row>
                            <!--部门-->
                            <Row v-if="nodeParticipant.participantType==='部门'">
                                <Col span="12">
                                    <FormItem label="部门：">
                                        <Input
                                                v-model="nodeParticipant.showName"
                                                icon="person-add"
                                                type="text"
                                                @on-click="showOrgTree()"
                                                @on-focus="showOrgTree()"
                                                placeholder="部门"/>
                                    </FormItem>
                                </Col>
                            </Row>
                            <!--人员-->
                            <Row v-if="nodeParticipant.participantType==='人员'">
                                <Col span="12">
                                    <FormItem label="人员：">
                                        <Input
                                                v-model="nodeParticipant.showName"
                                                icon="ios-people"
                                                type="text"
                                                @on-click="showPersonTree()"
                                                @on-focus="showPersonTree()"
                                                placeholder="人员"/>
                                    </FormItem>
                                </Col>
                            </Row>
                            <orgTree
                                    :visible="orgTreeVisible"
                                    :option="{deptFlag: false, userFlag: true, singleFlag: true}"
                                    @update:visible="orgTreeVisible = false"
                                    @on-save="saveAuditUser"
                            />
                            <orgTree
                                    :visible="orgTreeVisibleDep"
                                    :option="{deptFlag: true, userFlag: false, singleFlag: true}"
                                    @update:visible="orgTreeVisibleDep = false"
                                    @on-save="saveAuditDep"
                            />
                        </Form>
                    </TabPane>
                    <TabPane label="表达式" name="name3" :disabled="currentNodeBasicInfor.precondition !== '2'">
                        <Expression
                                @expressionHandler="expressionHandler"
                                @expressionFailHandler="expressionFailHandler"
                                :expressionReady="expressionReady"
                                :expressionData="expressionData"/>
                    </TabPane>
                </Tabs>
            </div>
            <div slot="footer">
                <Button type="success" @click="modalConfirm">确认</Button>
            </div>
        </Modal>
    </div>

</template>
<script>
  import Raphael from 'raphael'
  import Node from './node/Node'
  import NodeAdapter from "./node/NodeAdapter";
  // 组织机构框
  import orgTree from '@/components/orgtree/OrgTree'
  // 表达式
  import Expression from './expression/Expression'

  //
  import getRoleList from './node/getRoleList'

  export default {
	watch: {
	  workFlowDesignState: function (val, oldVla) {
		if (val.state) {
		  this.$emit('handlerWorkFlowDesign', this.handlerSubmit())
		}
	  },
	},
	props: {
	  // 返回数据回调方法
	  handlerWorkFlowDesign: {
		type: Function,
		default: function () {
		  return new Function();
		}
	  },
	  // 是否返回数据
	  workFlowDesignState: {
		type: Object,
		default: function () {
		  return {
			state: false,
		  }
		}
	  },
	  wrapWidth: {
		type: Number,
		default: function () {
		  return 900;
		},
	  },
	  wrapHeight: {
		type: Number,
		default: function () {
		  return 300;
		},
	  }
	},
	components: {
	  orgTree,
	  Expression,
	}
	,
	data() {
	  return {
	    // 角色数据
		roleList:[],
		// 表达式数据
		expressionData: '[]',
		// 是否启用表达式
		expressionReady: {
		  ready: false,
		},
		orgTreeVisibleDep: false, // 单位选择树
		orgTreeVisible: false, // 人员选择树
		modal1: false,
		// 节点节本信息
		currentNodeBasicInfor: {
		  nodeId: '',
		  nodeName: '',
		  nodeType: '',
		  precondition: '',
		  formKey: '',
		  remindType: [],
		  nodeDesc: '',
		},
		// 节点参与者
		nodeParticipant: {
		  participantType: '角色',
		  participantId: '',
		  participantName: '',
		  showName: '',
		  selectValue:'',
		  roleValue:'',
		},
		nodeHoverHandler: {
		  show: false,
		  position: {
			x: 0,
			y: 0,
		  }
		},
		dataReady: {
		  ready: false,
		},
		styleObject: {
		  width: '100px',
		  height: '100px',
		},
		dispatch: {
		  describe: {
			type: 'ready',
		  },
		},
		paper: null,
		nodeArr: null,
		currentNode: null,
		lineNodeHelper: {
		  fromNode: null,
		  toNode: null,
		},
		// 连线时,鼠标hover时间的辅助线
		lineNodeTemp: null,
	  }
	},
	mounted() {
	  // this.width = window.innerWidth - 220;
	  // this.height = window.innerHeight - 60;
	  this.styleObject = {
		width: this.wrapWidth + 'px',
		height: this.wrapHeight + 'px',
	  };
	  this.canvasWidth = this.wrapWidth - 140;
	  this.canvasHeight = this.wrapHeight - 60;
	  this.dataReady = {
		ready: true,
	  };

	  getRoleList().then(roleList=>{
        this.roleList = roleList;
      });

	  this.$nextTick(t => {
		let width = this.canvasWidth;
		let height = this.canvasHeight;
		this.paper = Raphael("container", width, height < 580 ? 580 : height);
		this.nodeArr = new Map();

		// 绘制网格
		this.axis(this.paper);

		// let node1 = new Node({
		// 	type: 'begin',
		// 	paper: this.paper,
		// 	x: 10,
		// 	y: 110,
		// })
		// let node2 = new Node({
		// 	type: 'ordinary',
		// 	nodeName: '施工部门',
		// 	paper: this.paper,
		// 	x: 110,
		// 	y: 110,
		// })
		// let node3 = new Node({
		// 	type: 'ordinary',
		// 	nodeName: '事业部\n总经理',
		// 	paper: this.paper,
		// 	x: 210,
		// 	y: 110,
		// })
		// let node4 = new Node({
		// 	type: 'ordinary',
		// 	nodeName: '企业管理部',
		// 	paper: this.paper,
		// 	x: 310,
		// 	y: 110,
		// })
		// let node5 = new Node({
		// 	type: 'ordinary',
		// 	nodeName: '施工部门\n协管副总',
		// 	paper: this.paper,
		// 	x: 410,
		// 	y: 60,
		// })
		// let node6 = new Node({
		// 	type: 'end',
		// 	nodeName: '结束',
		// 	paper: this.paper,
		// 	x: 510,
		// 	y: 110,
		// })
		// node1.init();
		// node2.init();
		// node3.init();
		// node4.init();
		// node5.init();
		// node6.init();
		// node1.connect(node2)
		// node2.connect(node3)
		// node3.connect(node4)
		// node4.connect(node5)
		// node4.connect(node6)
		// node5.connect(node6)
	  })
	},
	methods: {
	  // 参与者->角色改变
	  roleOnChange(role){
	    this.nodeParticipant.selectValue = {...role};
      },
	  // 参与者改变
	  nodeParticipantChange() {
		this.nodeParticipant.participantId = '';
		this.nodeParticipant.participantName = '';
		this.nodeParticipant.showName = '';
	  },
	  // 弹框显示
	  showPersonTree(target) {
		this.orgTreeVisible = true;
	  },
	  // 组织机构框 handler 选择人员
	  saveAuditUser(seledList) {
		if (seledList && seledList instanceof Array && seledList.length > 0) {
		  this.nodeParticipant.participantId = seledList[0].id;
		  this.nodeParticipant.participantName = seledList[0].name;
		  this.nodeParticipant.showName = seledList[0].name;
		}
	  },
	  // 弹框显示 部门
	  showOrgTree(target) {
		this.orgTreeVisibleDep = true;
	  },
	  // 组织机构框 handler 部门
	  saveAuditDep(seledList) {
		if (seledList && seledList instanceof Array && seledList.length > 0) {
		  this.nodeParticipant.participantId = seledList[0].departId;
		  this.nodeParticipant.participantName = seledList[0].deptName;
		  this.nodeParticipant.showName = seledList[0].deptName;
		}
	  },
	  // 返回准备好数据
	  handlerSubmit() {
		return this.nodeArr;
	  },
	  // 表达式回调方法
	  expressionHandler(expressionData) {
		// console.log(expressionData);
		this.expressionData = expressionData;
		// console.log(this.expressionData);
        debugger
		// 如果是长度为0的数组，则是返回一个
		if (expressionData instanceof Array && expressionData.length === 0) {
		  // 需要判断节点的基本信息->前置条件设置里是否为唯一，如果为唯一，则必须要有表达式（后置条件）
            if(this.currentNodeBasicInfor.precondition === '2'){
              this.$Message.error('当节点的前置条件为唯一时，必须要设置表达式（后置条件）！');
            }
		}else if (typeof expressionData === 'string') {
		  // 如果是string，则是表达式组件返回过来JSON.stringfy 过后的表达式字符串
		  this.modalConfirmHandler();
		}else{
		  this.$Message.error('表达式返回数据异常！');
        }

		this.expressionReady = {
		  ready: false,
		};
	  },
	  // 表达式回调方法
	  expressionFailHandler(expressionData,msg) {
		this.expressionData = expressionData;
	    this.$Message.error(msg);
		this.expressionReady = {
		  ready: false,
		};
	  },
	  init() {

	  },

	  // 点击弹窗确认按钮
	  modalConfirm() {
	    // 如果当前节点->基本信息->前置条件不为唯一(2) ， 则不验证表达式
        if(this.currentNodeBasicInfor.precondition !== '2'){
          this.modalConfirmHandler();
        }else{
		  // 触发表达式验证方法
		  this.expressionReady = {
			ready: true,
		  }
        }
	  },
	  modalConfirmHandler() {


		// 接收节点基本信息
		// 1. 基本信息
		this.currentNode = NodeAdapter.formToNodeByNodeBasicInfor(this.currentNode, this.currentNodeBasicInfor, this.nodeParticipant, this.expressionData);
		// 刷新节点
		this.currentNode.refresh();

		// // 将弹层的表单绑定的数据清空
        // // 1. 基本信息
		// this.currentNodeBasicInfor = {
		//   nodeId: '',
		//   nodeName: '',
		//   nodeType: '',
		//   precondition: '',
		//   postcondition: '',
		//   formKey: '',
		//   remindType: [],
		//   nodeDesc: '',
        // } ;
		// // 2. 参与者
		// this.nodeParticipant = {
		//   participantType: '',
		//   participantId: '',
		//   participantName: '',
        // } ;
		// // 3. 表达式
		// this.expressionData = '' ;

		// 更新全局数组里面的节点，根据uuid
		this.nodeArrDispatch(this.currentNode, 'modify');

		// console.log(this.nodeArr);
		// 节点handler隐藏
		this.nodeHoverHandler = {
		  show: false,
		  position: {
			x: 0,
			y: 0,
		  }
		};
		// 弹层隐藏
		this.modal1 = false;
	  },
	  // 点击节点编辑按钮并显示弹窗
	  editorNode() {
	    // console.log(this.currentNode)
		// 从节点数据到表单数据
		// 基本信息
		this.currentNodeBasicInfor = Object.assign({}, NodeAdapter.nodeToFormByNodeBasicInfor(this.currentNode).currentNodeBasicInfor);

		// debugger;
		// 参与者
		this.nodeParticipant =  Object.assign({}, NodeAdapter.nodeToFormByNodeBasicInfor(this.currentNode).nodeParticipant);


		this.modal1 = true;
	  },
	  // 删除节点
	  deleteNode() {
		this.currentNode.connectLineMap.forEach((value, key) => {
		  // 找到当前节点连线 里面的key
		  this.nodeArr.forEach(node => {
			// 遍历所有节点,除了当前节点
			// 当遍历非当前节点的所有节点时,出现和当前线一样的UUID,则删除当前线,并删除当前节点连线MAP里面的值
			if (node.uuid !== this.currentNode.uuid && node.connectLineMap.get(key) !== null && node.connectLineMap.get(key) !== undefined) {
			  node.connectLineMap.get(key).remove();
			  node.connectLineMap.delete(key);
			}
		  })
		});
		// 遍历节点Map，根据节点的uuid，删除节点
		// this.nodeArr.delete(this.currentNode.uuid);
		this.nodeArrDispatch(this.currentNode, 'del');
		// 当前节点删除并置空
		if (this.currentNode) {
		  this.currentNode.remove();
		  this.currentNode = null;
		}
		// 删除后当前画布状态置为ready
		this.dispatch.describe.type = 'ready'
		// 隐藏当前节点的hover编辑框
		this.nodeHoverHandler = {
		  show: false,
		  position: {
			x: 0,
			y: 0,
		  }
		};
	  },
	  // 新增节点
	  // 开始节点和结束节点，有且只能有一个
	  createNode(setting) {
		let createNodeFlag = true;
		this.nodeArr.forEach(node => {
		  if ((node.type === 'begin' && setting.type === 'begin') || (node.type === 'end' && setting.type === 'end')) {
			createNodeFlag = false;
		  }
		});
		if (createNodeFlag) {
		  let node = new Node(setting);
		  node.init();
		  let uuid = this.guid();
		  node.uuid = uuid;
		  node.type = setting.type;
		  this.nodeArrDispatch(node, 'add');
		  // this.nodeArr.set(uuid, node);
		} else {
		  this.$Message.error('开始节点和结束节点，有且只能有一个！');
		}
	  },
	  /**
	   *
	   * @param node
	   * @param type  add|modify|del
	   */
	  nodeArrDispatch(node, type) {
		if (type === 'add' || type === 'modify') {
		  this.nodeArr.set(node.uuid, node);
		} else if (type === 'del') {
		  this.nodeArr.delete(node.uuid);
		} else {
		  console.warn('nodeArrDispatch is not find ');
		}
		// console.log(this.nodeArr);
	  },
	  // 节点 点击事件
	  // 分3种情况
	  // 1. 当describe为ready的时候，隐藏hover编辑框
	  // 2. 当describe为line的时候 ，
	  //      （1）、开始绘制连线->绘制节点连线辅助线
	  //      （2）、自己给自己连线 -> 给出提示
	  //      （3）、点击其他节点-》 1》连线
	  //                          2》 两个节点之间只能有一条连线
	  // 3. 当describe为choose的时候，显示节点编辑小tooltips
	  nodeClick(node, event) {
		this.currentNode = node;
		// 当空白状态下点击节点
		if (this.dispatch.describe.type === 'ready') {
		  // 隐藏当前节点的hover编辑框
		  this.nodeHoverHandler = {
			show: false,
			position: {
			  x: 0,
			  y: 0,
			}
		  };
		}
		// 如果选择了连线, 则判断开始节点与结束节点.并连线
		if (this.dispatch.describe.type === 'line') {
		  // 如果开始节点为null，那么当前点击的节点为开始节点
		  if (this.lineNodeHelper.fromNode === null) {
			this.lineNodeHelper.fromNode = node;
		  } else {
			// 如果有开始节点
			// 并且当前点击的节点的ID和开始节点的ID一致，说明点击的是自己
			// 自己不能连接自己
			if (this.lineNodeHelper.fromNode.uuid === node.uuid) {
			  this.$Message.error('节点不能自己连自己')
			} else {
			  // 开始连接两个点，
			  // 开始节点为 this.lineNodeHelper.formNode
			  // 结束节点为 ： node
			  // 遍历开始节点的所有线，如果发现有线的结束节点为 node节点，那么两个节点只能有一条线
			  let fromNodeLineMap = this.lineNodeHelper.fromNode.connectLineMap;

			  let fromNodeUuid = this.lineNodeHelper.fromNode.uuid;
			  let targetNodeUuid = node.uuid;
			  let canDrawLineTraget = true;
			  fromNodeLineMap.forEach(line => {
				// console.log(line);
				// 有2种可能， A节点与B节点已经有一条线，
				// 那么排除情况有2种：
				// 1-> 从A节点向B节点画一条线
				// 2-> 从B节点向A节点画一条线
				// 线的开始节点的ID = 开始节点ID && 线的结束节点ID = 结束节点ID
				// 线的开始节点的ID = 结束节点ID && 线的结束节点ID = 开始节点ID
				if ((line.fromNode.uuid === fromNodeUuid && line.toNode.uuid === targetNodeUuid) ||
					(line.toNode.uuid === fromNodeUuid && line.fromNode.uuid === targetNodeUuid)) {
				  canDrawLineTraget = false;
				}
			  });
			  // 两个节点之间只有一条线
			  if (canDrawLineTraget) {
				this.lineNodeHelper.fromNode.connect(node);
				this.lineNodeHelper = {
				  fromNode: null,
				  toNode: null,
				};
				this.dispatch.describe.type = 'ready';
				this.lineNodeHelper.fromNode = null;
				if (this.lineNodeTemp !== null) {
				  this.lineNodeTemp.remove();
				}
			  } else {
				this.$Message.error('两个节点直接只能存在一条线')
			  }
			}
		  }
		}
		// 当为choose的时候.显示编辑删除
		if (this.dispatch.describe.type === 'choose') {
		  this.nodeHoverHandler = {
			show: true,
			position: {
			  x: this.currentNode.nodeImg.attr('x') + 134,
			  y: this.currentNode.nodeImg.attr('y'),
			}
		  };
		  this.dispatch.describe.type = 'ready';
		}
	  },
	  // 双击容器
	  dbclickContainer(event) {
		// console.log('dbclickContainer');
		let self = this;
		if (self.dispatch.describe.type === 'line') {
		  // 如果当前辅助连线存在，则删除
		  if (this.lineNodeTemp !== null) {
			this.lineNodeTemp.remove();
		  }
		  ;
		  // 并且把当前暂存连线对象置空
		  // 下次再选择连线状态时,重新选取开始节点和结束节点
		  this.lineNodeHelper = {
			fromNode: null,
			toNode: null,
		  };
		  self.dispatch.describe.type = 'ready';
		}
	  },
	  // 点击容器
	  clickContainer(event) {
		// console.log('clickContainer');
		let self = this;
		// 当ready状态下点击容器
		if (this.dispatch.describe.type === 'ready') {

		}
		// console.log(event);
		// console.log(window.scrollX)
		// 当状态为开始节点|普通节点|结束节点时.  新增节点
		if (self.dispatch.describe.type === 'begin' || self.dispatch.describe.type === 'ordinary' || self.dispatch.describe.type === 'end') {
		  self.createNode({
			context: self,
			type: self.dispatch.describe.type,
			paper: self.paper,
			clickHandler: this.nodeClick,
			x: event.layerX - 30,
			y: event.layerY - 18 - window.pageYOffset,
		  });
		  self.dispatch.describe.type = 'ready';
		}
	  },
	  // 容器鼠标滑过
	  mouseover(event) {
		let self = this;
		if (self.dispatch.describe.type === 'line') {
		  // 如果当前辅助连线存在，则删除
		  if (this.lineNodeTemp !== null) {
			this.lineNodeTemp.remove();
		  }
		  // 如果鼠标移除绘图区域。

		  // 如果当前存在连线开始节点
		  if (event && event.offsetX && event.offsetY && self.lineNodeHelper.fromNode !== null && self.lineNodeHelper.fromNode !== undefined) {
			this.lineNodeTemp = self.paper.path("M" + this.lineNodeHelper.fromNode.slot.right.x + " " + this.lineNodeHelper.fromNode.slot.right.y + "L" + (event.offsetX) + " " + (event.offsetY));
			this.lineNodeTemp.attr({
			  'stroke-width': 2,
			  'stroke': '#444444',
			  'arrow-end': 'classic-wide-long',
			});
		  }
		}
	  },
	  chooseHandler() {
		this.dispatch = {
		  ready: true,
		  describe: {
			type: 'choose',
		  }
		};
	  },
	  beginHandler() {
		this.dispatch = {
		  ready: true,
		  describe: {
			type: 'begin',
		  }
		};
	  },
	  ordinaryHandler() {
		this.dispatch = {
		  ready: true,
		  describe: {
			type: 'ordinary',
		  }
		};
	  },
	  endHandler() {
		this.dispatch = {
		  ready: true,
		  describe: {
			type: 'end',
		  }
		};
	  },
	  lineHandler() {
		this.dispatch = {
		  ready: true,
		  describe: {
			type: 'line',
		  }
		};
	  },
	  // 获取UUID
	  guid() {
		function s4() {
		  return Math.floor((1 + Math.random()) * 0x10000)
			  .toString(16)
			  .substring(1);
		}

		return s4() + s4() + '_' + s4() + '_' + s4() + '_' + s4() + '_' + s4() + s4() + s4();
	  },
	  // 绘制栅格
	  axis(r, grid, offset) {
		let g = grid || false;
		let o = offset || 2;

		let w = r.width -30;
		let h = r.height -30;

		r.path("M" + w + "," + o + "L0," + o + "L" + o + "," + h).attr("stroke", "red");
		r.path("M" + w + "," + o + "L" + (w - 5) + ",5").attr("stroke", "red");
		r.path("M" + o + "," + h + "L5," + (h - 5)).attr("stroke", "red");

		let len1 = grid ? h : 10;
		for (let i = 1; i <= w / 50; i = i + 1) {
		  r.path("M" + i * 50 + ",0L" + i * 50 + "," + len1).attr("stroke", "gray");
		  if (i % 2 === 0) r.text(i * 50 - 10, 10, i * 50).attr("fill", "blue");
		}

		let len2 = grid ? w : 10
		for (let i = 1; i <= h / 50; i = i + 1) {
		  r.path("M0," + i * 50 + "L" + len2 + "," + i * 50).attr("stroke", "gray");
		  if (i % 2 === 0) r.text(10, i * 50 - 10, i * 50).attr("fill", "blue");
		}
	  },

	},
  }
</script>
<style lang="scss" scoped>
    .v-list {
        background: rgba(239, 244, 248, 1);
        padding: 10px 10px 10px 10px;
    }

    .workFlowDesign-wrap {
        position: relative;
        z-index: 101;
        /*left: 220px;*/
        /*right: 0;*/
        /*top: 60px;*/
        /*bottom: 0;*/
        min-height: 580px;
        background-color: #EFF4F8;
        padding-top: 20px;
        .wfd-node {
            width: 40px;
            position: absolute;
            z-index: 10001;
            left: 300px;
            top: 300px;
            .icon-img {
                width: 30px;
                height: 30px;
                display: block;
                margin: 5px auto;
            }
            &.begin {
                .icon-img {
                    background: url(../../../../static/img/icon-begin@2x.png) center no-repeat;
                    background-image: -webkit-image-set(url(../../../../static/img/icon-begin@2x.png) 1x no-repeat, url(../../../../static/img/icon-begin@2x.png) 2x no-repeat);
                    background-size: cover;
                }
            }
            &.ordinary {
                .icon-img {
                    background: url(../../../../static/img/icon-ordinary@2x.png) center no-repeat;
                    background-image: -webkit-image-set(url(../../../../static/img/icon-ordinary@2x.png) 1x no-repeat, url(../../../../static/img/icon-ordinary@2x.png) 2x no-repeat);
                    background-size: cover;
                }
            }
            &.end {
                .icon-img {
                    background: url(../../../../static/img/icon-end@2x.png) center no-repeat;
                    background-image: -webkit-image-set(url(../../../../static/img/icon-end@2x.png) 1x no-repeat, url(../../../../static/img/icon-end@2x.png) 2x no-repeat);
                    background-size: cover;
                }
            }
            h4 {
                text-align: center;
                color: #3E4D63;
                font-size: 14px;
            }
            .tools {
                background: url(../../../../static/img/wfd_icon_tools_bg.png) center no-repeat;
                background-image: -webkit-image-set(url(../../../../static/img/wfd_icon_tools_bg.png) 1x no-repeat, url(../../../../static/img/wfd_icon_tools_bg@2x.png) 2x no-repeat);
                width: 56px;
                height: 36px;
                position: absolute;
                top: -32px;
                left: -7px;
                background-size: cover;
                text-align: center;
                .icon-editor,
                .icon-del {
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: 5px;
                    cursor: pointer;
                }
                .icon-editor {
                    background: url(../../../../static/img/wfd_icon_editor@2x.png) center no-repeat;
                    background-image: -webkit-image-set(url(../../../../static/img/wfd_icon_editor.png) 1x no-repeat, url(../../../../static/img/wfd_icon_editor@2x.png) 2x no-repeat);
                }
                .icon-del {
                    background: url(../../../../static/img/wfd_icon_del@2x.png) center no-repeat;
                    background-image: -webkit-image-set(url(../../../../static/img/wfd_icon_del.png) 1x no-repeat, url(../../../../static/img/wfd_icon_del@2x.png) 2x no-repeat);
                }
            }
        }
        #container {
            /*height: 100%;*/
            /*width: 100%;*/
            position: absolute;
            /*background-color: #000000;*/
            left: 140px;
            z-index: 104;
        }
        .toolbar {
            border-right: dashed 1px #83A5BF;
            position: absolute;
            z-index: 102;
            left: 0;
            top: 24px;
            bottom: 24px;
            width: 130px;
            .item {
                text-align: center;
                cursor: pointer;
                margin-bottom: 18px;
                padding-top: 10px;
                width: 80%;
                margin-right: auto;
                margin-left: auto;
                &.active {
                    background-color: #ccc;
                }
                i {
                    display: block;
                    width: 30px;
                    height: 30px;
                    margin: 0 auto;
                    margin-bottom: 14px;
                    &.icon-line {
                        width: 46px;
                        height: 43px;
                    }
                }
                span {
                    font-size: 14px;
                    color: #3E4D63;
                    text-align: center;
                }
            }
            i.icon-choose {
                background: url(../../../../static/img/icon-choose@2x.png) center no-repeat;
                background-image: -webkit-image-set(url(../../../../static/img/icon-choose.png) 1x no-repeat, url(../../../../static/img/icon-choose@2x.png) 2x no-repeat);
                background-size: cover;
            }
            i.icon-begin {
                background: url(../../../../static/img/icon-begin@2x.png) center no-repeat;
                background-image: -webkit-image-set(url(../../../../static/img/icon-begin.png) 1x no-repeat, url(../../../../static/img/icon-begin@2x.png) 2x no-repeat);
                background-size: cover;
            }
            i.icon-ordinary {
                background: url(../../../../static/img/icon-ordinary@2x.png) center no-repeat;
                background-image: -webkit-image-set(url(../../../../static/img/icon-ordinary.png) 1x no-repeat, url(../../../../static/img/icon-ordinary@2x.png) 2x no-repeat);
                background-size: cover;
            }
            i.icon-end {
                background: url(../../../../static/img/icon-end@2x.png) center no-repeat;
                background-image: -webkit-image-set(url(../../../../static/img/icon-end.png) 1x no-repeat, url(../../../../static/img/icon-end@2x.png) 2x no-repeat);
                background-size: cover;
            }
            i.icon-line {
                background: url(../../../../static/img/handler-line.png) center no-repeat;
                background-size: cover;
            }
            h3 {
                font-size: 18px;
                color: #3E4D63;
                text-align: center;
                margin-bottom: 38px;
            }
        }
    }
</style>

<style lang="scss">
    .popupBox_wfd {
        .ivu-modal-mask {
            z-index: 900;
        }
        .ivu-modal-wrap {
            z-index: 901;
        }
        .msgBtn {
            text-align: center;
            height: 35px;
            margin: 20px 0;
            h4 {
                height: 24px;
                line-height: 24px;
                margin: 5px 0;
                span {
                    font-size: 18px;
                    font-family: MicrosoftYaHei;
                    font-weight: bold;
                    color: #3e4d63;
                }
            }
        }

        .ivu-modal-header-inner {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: #1c1c1c;
            height: 38px;
            line-height: 38px;
        }
        .ivu-modal-header {
            border: 1px solid #cbcbcb;
            -webkit-box-shadow: 0 1px 0 0 #d4d4d4;
            box-shadow: 0 1px 0 0 #d4d4d4;
            border-radius: 5px 5px 0 0;
            height: 38px;
            line-height: 38px;
            padding: 0 20px;
            background-color: #eaeaea;
            span {
                height: 19px;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                font-weight: bold;
                color: #1c1c1c;
                line-height: 19px;
            }
        }
        .ivu-modal-close .ivu-icon-ios-close-empty {
            font-size: 34px;
            position: relative;
            top: -5px;
        }
        .ivu-modal-body {
            /*height: 600px;*/
        }
        .ivu-modal-footer {
            /*display: none;*/
        }
    }
</style>
